<template>
  <el-drawer
    :append-to-body="true"
    title="发起人"
    v-model="visible"
    class="set_promoter"
    :show-close="false"
    :size="550"
    :before-close="savePromoter"
  >
    <div class="demo-drawer__content">
      <div class="promoter_content drawer_content">
        <el-radio-group v-model="radio1">
          <el-radio-button :value="1">基础设置</el-radio-button>
          <!-- <el-radio-button :value="2">表单权限</el-radio-button> -->
        </el-radio-group>
        <div class="personnel_box" v-show="radio1 == 1">
          <div class="who_can_submit">谁可以提交该审批</div>
          <!-- 开关 -->
          <div class="switch_box">
            <span class="switchtitlecss">所有人 </span>
            <el-switch v-model="isAll" />
            <span class="switchcss" v-if="isAll">
              已开启，下方人员/职务/部门无需再进行选取设置。
            </span>
          </div>
          <div class="per_content">
            <span class="title">按人员选取</span>
            <el-button type="primary" link @click="addPromoter">选取</el-button>
            <el-button type="primary" link @click="clearData(0)">
              清除
            </el-button>
            <div class="name_box">
              <el-tag
                v-for="(u, i) in flowPromoter"
                :key="i"
                closable
                type="info"
                @close="delUser(0, i)"
              >
                {{ u.name }}
              </el-tag>
            </div>
          </div>
          <div class="per_content">
            <span class="title">按职务选取</span>
            <el-button type="primary" link @click="addDept(1)">选取</el-button>
            <el-button type="primary" link @click="clearData(1)">
              清除
            </el-button>
            <div class="name_box">
              <el-tag
                v-for="(u, i) in flowDuties"
                :key="i"
                closable
                type="info"
                @close="delUser(1, i)"
              >
                {{ u.name }}
              </el-tag>
            </div>
          </div>
          <div class="per_content">
            <span class="title">按部门选取</span>
            <el-button type="primary" link @click="addDept(2)">选取</el-button>
            <el-button type="primary" link @click="clearData(2)">
              清除
            </el-button>
            <div class="name_box">
              <el-tag
                v-for="(u, i) in flowDept"
                :key="i"
                closable
                type="info"
                @close="delUser(2, i)"
              >
                {{ u.name }}
              </el-tag>
            </div>
          </div>
        </div>
        <div class="table_box" v-show="radio1 == 2">
          <el-table
            :data="tableData"
            border
            stripe
            height="calc(100vh - 200px)"
            :header-cell-style="{ backgroundColor: '#f2f2f2' }"
          >
            <el-table-column label="字段名称" prop="fieldName" align="center" />
            <el-table-column align="center">
              <template #header>
                <el-checkbox
                  v-model="tableCheck.readable"
                  :indeterminate="tableCheck.isReadableIndeterminate"
                  @change="handleReadableChange"
                >
                  可读
                </el-checkbox>
              </template>
              <template #default="{ row }">
                <el-checkbox v-model="row.readable" @change="readableChange" />
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template #header>
                <el-checkbox
                  v-model="tableCheck.writable"
                  :indeterminate="tableCheck.isWritableIndeterminate"
                  @change="handleWritableChange"
                >
                  编辑
                </el-checkbox>
              </template>
              <template #default="{ row }">
                <el-checkbox v-model="row.writable" @change="writableChange" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="savePromoter">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
      <!-- 按人员选取 -->
      <FlowDialogTeacherSelection
        :importVisible="promoterVisible"
        :checkedList="checkedPromoterList"
        @closeDialog="surePromoter"
      />
      <!-- 按部门职务选取 -->
      <FlowDialogDeptDutiesSelection
        :importVisible="deptDutiesVisible"
        :checkedList="checkedDeptDutiesList"
        :type="type"
        @closeDialog="sureDeptDuties"
      />
    </div>
  </el-drawer>
</template>
<script setup>
import $func from "@/utils/flow";
import { useFlowStore } from "@/stores/flow";

let store = useFlowStore();
let { setPromoter, setFlowPermission } = store;
let formFiledList = computed(() => store.formFiledList);
let promoterDrawer = computed(() => store.promoterDrawer);
let flowPermission1 = computed(() => store.flowPermission1);
let visible = computed({
  get() {
    return promoterDrawer.value;
  },
  set() {
    closeDrawer();
  },
});

const state = reactive({
  radio1: 1,
  type: 1, //1为职务，2为部门
  isAll: false,
  flowConfig: {},
  flowPromoter: [],
  flowDuties: [],
  flowDept: [],
  checkedDeptDutiesList: [],
  checkedPromoterList: [],
  promoterVisible: false,
  deptDutiesVisible: false,

  tableData: [],
  tableCheck: {
    readable: false,
    writable: false,
    isReadableIndeterminate: true,
    isWritableIndeterminate: true,
  },
});
const {
  radio1,
  isAll,
  type,
  flowPromoter,
  flowDuties,
  flowDept,
  checkedDeptDutiesList,
  checkedPromoterList,
  promoterVisible,
  deptDutiesVisible,
  tableData,
  tableCheck,
} = toRefs(state);

watch(flowPermission1, (val) => {
  if (promoterDrawer.value) {
    state.flowPromoter = [];
    state.flowDuties = [];
    state.flowDept = [];
    state.flowConfig = val.value;
    if (val.value.type == 0) {
      state.isAll = val.value.isAll;
    }
    val.value.nodeUserList.forEach((u) => {
      if (u.type == 1) {
        state.flowPromoter.push(u);
      } else if (u.type == 2) {
        state.flowDuties.push(u);
      } else {
        state.flowDept.push(u);
      }
    });
    // 表单权限
    if (val.value.formPermissions.length > 0) {
      // 把val.value.formPermissions没有的id添加上
      let arr = val.value.formPermissions;
      let list = JSON.parse(JSON.stringify(formFiledList.value));
      list.forEach((item) => {
        let obj = arr.find((v) => v.fieldId == item.fieldId);
        if (obj) {
          item.readable = obj.readable;
          item.writable = obj.writable;
        } else {
          item.readable = true;
          item.writable = false;
        }
      });
      state.tableData = list;
    } else {
      let list = JSON.parse(JSON.stringify(formFiledList.value));
      list.forEach((u) => {
        u.writable = true;
      });
      state.tableData = list;
    }
    readableChange();
    writableChange();
  }
});

/**
 * 选取人员
 */
function addPromoter() {
  state.checkedPromoterList = state.flowPromoter;
  state.promoterVisible = true;
}
/**
 * 确认人员
 */
function surePromoter(data) {
  state.promoterVisible = false;
  if (!data) return; //点击关闭窗口
  state.flowPromoter = data;
}
/**
 * 选取部门职务
 */
function addDept(type) {
  state.type = type;
  if (type == 1) {
    state.checkedDeptDutiesList = state.flowDuties;
  } else {
    state.checkedDeptDutiesList = state.flowDept;
  }
  state.deptDutiesVisible = true;
}
/**
 * 确认部门职务
 */
function sureDeptDuties(data) {
  state.deptDutiesVisible = false;
  if (!data) return; //点击关闭窗口
  if (state.type == 1) {
    state.flowDuties = data;
  } else {
    state.flowDept = data;
  }
}
/**
 * 清除数据
 */
function clearData(type) {
  if (type == 0) {
    state.flowPromoter = [];
  } else if (type == 1) {
    state.flowDuties = [];
  } else {
    state.flowDept = [];
  }
}
/**
 * 单个清除数据
 */
function delUser(type, index) {
  if (type == 0) {
    state.flowPromoter.splice(index, 1);
  } else if (type == 1) {
    state.flowDuties.splice(index, 1);
  } else {
    state.flowDept.splice(index, 1);
  }
}
/**
 * 改变全部可读权限
 */
function handleReadableChange(val) {
  state.tableData.forEach((u) => {
    u.readable = val;
  });
  state.tableCheck.isReadableIndeterminate = false;
}
/**
 * 改变全部编辑权限
 */
function handleWritableChange(val) {
  state.tableData.forEach((u) => {
    u.writable = val;
  });
  state.tableCheck.isWritableIndeterminate = false;
}
/**
 * 改变单个可读权限
 */
function readableChange() {
  let allReadableTrue = state.tableData.every((item) => item.readable === true);
  let allReadableFalse = state.tableData.every(
    (item) => item.readable === false,
  );
  if (allReadableTrue) {
    state.tableCheck.readable = true;
    state.tableCheck.isReadableIndeterminate = false;
  } else if (allReadableFalse) {
    state.tableCheck.readable = false;
    state.tableCheck.isReadableIndeterminate = false;
  } else {
    state.tableCheck.readable = false;
    state.tableCheck.isReadableIndeterminate = true;
  }
}
/**
 * 改变单个编辑权限
 */
function writableChange() {
  let allWritableTrue = state.tableData.every((item) => item.writable === true);
  let allWritableFalse = state.tableData.every(
    (item) => item.writable === false,
  );
  if (allWritableTrue) {
    state.tableCheck.writable = true;
    state.tableCheck.isWritableIndeterminate = false;
  } else if (allWritableFalse) {
    state.tableCheck.writable = false;
    state.tableCheck.isWritableIndeterminate = false;
  } else {
    state.tableCheck.writable = false;
    state.tableCheck.isWritableIndeterminate = true;
  }
}
/**
 * 保存
 */
function savePromoter() {
  const summarizeData = state.flowPromoter.concat(
    state.flowDuties,
    state.flowDept,
  );
  state.flowConfig.nodeUserList = summarizeData;
  state.flowConfig.isAll = state.isAll;
  state.flowConfig.formPermissions = state.tableData;
  state.flowConfig.error = state.isAll
    ? false
    : !$func.setApproverStr(state.flowConfig);
  setFlowPermission({
    value: state.flowConfig,
    flag: true,
    id: flowPermission1.value.id,
  });
  closeDrawer();
}
function closeDrawer() {
  setPromoter(false);
}
</script>
<style lang="scss" scoped>
.set_promoter {
  .promoter_content {
    padding: 20px 20px 0;
    :deep(.el-radio-button__inner) {
      width: 246px;
    }
  }
  .personnel_box {
    .who_can_submit {
      margin: 20px 0 6px 0;
      font-size: 14px;
    }
    .switch_box {
      margin-top: 10px;
      .el-switch {
        margin: 0 4px;
        position: relative;
        top: -1px;
      }
      .switchtitlecss {
        font-size: 14px;
      }
      .switchcss {
        font-size: 13px;
        color: red;
      }
    }
    .per_content {
      .title {
        display: inline-block;
        font-size: 14px;
        margin: 8px 20px 0 0;
      }
      .name_box {
        width: 100%;
        height: 130px;
        margin-top: 5px;
        padding: 0 4px 4px 0;
        border: 1px solid #dcdfe6;
        font-size: 14px;
        border-radius: 5px;
        overflow-y: auto;
        .el-tag {
          margin: 4px 0 0 4px;
        }
      }
    }
  }
  .table_box {
    margin-top: 20px;
  }
}
</style>
